<template>
  <BasicModal
    width="900px"
    v-bind="$attrs"
    @ok="handleSubmint"
    :minHeight="300"
    okText="确认"
    @register="register"
    :title="modalTitle" >
    <div class="container">
      <div>
        <a-input
            v-model:value="GroupName"
            placeholder="请输入分组名"
            style="width: 300px;margin-right: 20px"
            :allowClear="true"
        />
        <a-input-search
            v-model:value="searchValue"
            placeholder="请输入设备属性"
            style="width: 300px"
            :allowClear="true"
            @search="onSearch"
          />
      </div>
      <div class="container-group">
        <CheckboxGroup v-model:value="checkedList" @change="onChange" ref="columnListRef">
          <template v-for="item in attributeList" :key="item.Key">
              <Checkbox :value="item.Key" class="check-item">
                  {{ item.Name}}
                </Checkbox>
          </template>
        </CheckboxGroup>
      </div>
    </div>
  </BasicModal>
</template>

<script lang="ts" setup>
  import { BasicModal, useModal } from '/@/components/Modal';
  import { computed, nextTick, reactive, ref, watch } from 'vue';
  import { useMessage } from '/@/hooks/web/useMessage';
  import { useI18n } from '/@/hooks/web/useI18n';
  import type { CheckboxChangeEvent } from 'ant-design-vue/lib/checkbox/interface';
  import { CheckboxGroup } from 'ant-design-vue';
  import { Checkbox } from 'ant-design-vue';

  const ACheckboxGroup = CheckboxGroup;
  const props = defineProps({
    info: {
      type: Object,
      default: () => {},
    },
  });
  const modalTitle = ('设备属性');
  let searchValue =  ref('');
  let GroupName = ref('');
  let checkedList  = ref(); 
  let attributeList =  ref([]);
  watch(
    () => props.info.data,
    () => {
      checkedList.value = []
      attributeList.value = props.info.data
      GroupName.value = props.info.GroupName
    },
    { deep: true },
  );
  const { createMessage } = useMessage();
  const { t } = useI18n();
  const emit = defineEmits(['submitSuccess']);
  const [register] = useModal();
  //搜索
  function onSearch(){
    let list = JSON.parse(JSON.stringify(props.info.data));
    // let result = searchValue.value === '' ? list : list.filter(item => item.Name.includes(searchValue.value)) ;
    // attributeList.value.splice(0, attributeList.value.length, ...result);
    if (searchValue.value === '') {
      nextTick(() => {
        attributeList.value = list;
      });
    } else {
      let result = list.filter(item => item.Name.includes(searchValue.value));
      nextTick(() => {
        attributeList.value = result;
      });
    }
    
  }
  //勾选
  function onChange(list: string[]) {
    checkedList.value = list
  }
  
  async function handleSubmint() {
    let data = {
      GroupName: GroupName.value,
      checkedList: checkedList.value
    }
    emit('submitSuccess',data);
  }
 
</script>

<style lang="less" scoped>
 .border-btm{
  border-bottom: 1px solid #C0C4CC;
  margin-bottom: 20px
 }
 .container-title{
  font-size: 14px;
  font-weight: 700;
  position: relative;
  padding-left: 8px
 }
 .container-title:before {
  content: "";
  background-color: #3796EC;
  width: 3px;
  height: 18px;
  position: absolute;
  left: 0;
  top: 50%;
  margin-top: -8px;
}

 .container-group{
  margin-top: 25px;
 }
 .check-item{
  min-width: 100px;
  // border: 1px solid;
  margin-bottom: 15px;
 }
</style>
